<template>
  <div class="product-size-charts">
    <div class="container-select">
      <el-select
        v-model="value"
        placeholder="Select"
        size="large"
        style="width: 110px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <!-- 动态创建多个图表容器 -->
    <div
      v-for="(chart, index) in chartData"
      :key="index"
      :ref="(el) => (chartRefs[index] = el)"
      class="chart-container"
    ></div>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const value = ref("机组1");
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
];

// 定义每个机组的数据和标题
const chartData = [
  {
    title: "温区1",
    realTime: [30, 50, 30, 90, 2],
    setPoint: [22, 24, 33, 35, 76],
    timeData: ["12:10", "12:20", "12:30", "12:40", "12:50"],
  },
  {
    title: "温区2",
    realTime: [10, 60, 40, 80, 70],
    setPoint: [32, 22, 42, 52, 42],
    timeData: ["12:10", "12:20", "12:30", "12:40", "12:50"],
  },
  {
    title: "温区3",
    realTime: [10, 80, 10, 20, 80],
    setPoint: [12, 52, 33, 44, 66],
    timeData: ["12:10", "12:20", "12:30", "12:40", "12:50"],
  },
  {
    title: "温区4",
    realTime: [80, 60, 40, 50, 90],
    setPoint: [25, 26, 44, 77, 88],
    timeData: ["12:10", "12:20", "12:30", "12:40", "12:50"],
  },
  {
    title: "温区5",
    realTime: [60, 20, 80, 70, 90],
    setPoint: [66, 44, 55, 37, 69],
    timeData: ["12:10", "12:20", "12:30", "12:40", "12:50"],
  },
];

// `chartRefs` 用来存储每个图表对应的 DOM 元素
const chartRefs = ref([]);

// 复用的 ECharts 配置生成函数，新增 index 参数用于判断 legend 显示
function generateChartOptions(title, realTime, setPoint, time, index) {
  const options = {
    title: {
      text: title,
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      left: -3,
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "2%",
      top: "30%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "rgba(0, 0, 0, 0.7)", // 背景
      padding: [8, 10], // 内边距
      extraCssText:
        "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);color: white;", // 添加阴影
      formatter: function (params) {
        let tooltipContent = params[0].axisValue + "<br/>"; // 显示时间
        params.forEach((param) => {
          tooltipContent = tooltipContent + `${param.seriesName} : ${param.value}`;
        });
        return tooltipContent;
      },
    },
    xAxis: {
      type: "category",
      data: time,
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.30)",
        },
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      interval: 50,
      max: 100,
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(135,140,147,0.8)",
        },
      },
    },
    series: [
      {
        name: "实时",
        type: "line",
        data: realTime,
        smooth: false,
        showSymbol: false,
        symbolSize: 1,
        lineStyle: {
          color: "#3CC3DF",
          width: 1,
        },
      },
    ],
  };

  // 仅为第一个图表添加 legend
  if (index === 0) {
    options.legend = {
      data: [
        { name: "实时", icon: "rect", itemStyle: { color: "#46CBF0" } },
        { name: "设定", icon: "rect", itemStyle: { color: "#FFAE4C" } },
      ],
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      itemWidth: 16,
      itemHeight: 2,
      icon: "rect",
      right: 10,
    };
  }

  return options;
}

// 使用 onMounted 来确保 DOM 渲染完成后进行 ECharts 初始化
onMounted(() => {
  chartData.forEach((data, index) => {
    const chartDom = chartRefs.value[index];
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      const options = generateChartOptions(
        data.title,
        data.realTime,
        data.setPoint,
        data.timeData,
        index // 传递 index 参数
      );
      myChart.setOption(options);
    }
  });
});
</script>
  
  <style scoped lang="scss">
.product-size-charts {
  width: 100%;
  height: 616px;
  background: linear-gradient(240deg, #051522 0%, rgba(20, 84, 136, 0.1) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;


  .container-select {
    margin-left: 200px;
    font-family: "DingTalkJinBuTi";
    margin-bottom: 10px;
  }
}
.chart-container {
  width: 320px;
  height: 105px;
  margin-bottom: 10px;
}

:deep(.el-select--large .el-select__wrapper) {
  min-height: 32px;
}
:deep(.el-select__wrapper.is-focused ){
  // box-shadow: none;
  box-shadow: 0 0 0 1px #28c4fe;
}
:deep(.el-scrollbar) {
  width: 110px !important;
}
:deep(.el-select__placeholder) {
  color: #ffffff !important;
}
:deep(.el-select__wrapper) {
  background-color: #28c5fe00;
}
</style>